<template>
  <div>
   <top/>
    <div class="main">
      <div class="backlink1">
            <a href="Product.vue" style="text-decoration: none;">
                <el-button type="info" plain style="font-size: large;">Return to</el-button>
            </a>
        </div>
        <div class="message">
      <el-card style="width:1000px;height: 350px;" shadow="hover">  
        <el-container>
            <el-header>
              <p class="text0" style="font-size:30px;padding-left:35px;">{{ sessionScope.product.name }}</p>
            </el-header>
            <el-main style="width: 1000px;">
                <el-table :data="tableData" style="width: 1000px; height:250px">
                    <el-table-column prop="Item_ID" label="Item ID" width="150px">
                      <template slot-scope="scope">
                        <a :href="`itemForm?itemId=${scope.row.Item_ID}`">{{ scope.row.Item_ID }}</a>
                        </template>
                    </el-table-column>
                    <el-table-column prop="Product_ID" label="Product ID" width="150px">
                    </el-table-column>
                    <el-table-column prop="Description" label="Description"  width="250px">
                    </el-table-column>
                    <el-table-column prop="List_Price" label="List Price"  width="250px">
                    </el-table-column>
                    <el-table-column label="">
                    <template slot-scope="scope">
                      <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Add to Cart</el-button>
                    </template>
                    </el-table-column>
                </el-table>
            </el-main>
         </el-container>
       </el-card>
      </div>
    </div>
    <bottom/>
  </div>
</template>

<script>
import top from '../../components/Top.vue'
import bottom from '../../components/Bottom.vue'
  export default {
    components: {top , bottom },
    name:   'Product',
    data() {
      return {
        sessionScope: {
        product: {
          name: 'Birds' // 这里模拟 sessionScope.product.name 的值
        }
      },
        tableData: [{
          Item_ID: 'EST-18',
          Product_ID: 'AV-CB-01',
          Description: 'Adult Male Amazon Parrot',
          List_Price:'$193.50',
        }
        ]
      }
    },
    methods: {
      handleEdit(index, row) {
    // 构建链接
    const link = `addItemToCart?workingItemId=${row.itemId}`;
    // 重定向用户到链接
    window.location.href = link;
      }
    }
  }
</script>

<style scoped>
 .el-table .cell {
  line-height:35px;
  text-align:center;
 }
</style>